<template>
  <div class="banner-add">
    <div class="createPost-main-container">
      <el-form ref="form" label-width="120px" :rules="rules" :model="form">
        <el-form-item label="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="内容" prop="value">
          <tinymce-editor
            ref="myEditor"
            upload-model="news"
            show-hyperlink-btn
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getEditData, postData } from '@/api/contentConfig/index'
import { getVocationalLink, getNewsTypeLink, getNewsLink, getBasicConfigLink } from '@/api/common'
import TinymceEditor from 'components/ueditor'

const defaultForm = {
  code: '',
  name: '',
  value: '',
  valueType: 'reachText'
}

const typeList = [
  { value: 'news', text: '资讯', hasId: true, input: false, ref: 'newsLink' },
  { value: 'newsType', text: '资讯类型', hasId: true, input: false, ref: 'newsTypeLink' },
  { value: 'basicConfig', text: '基础配置', hasId: true, input: false, ref: 'basicConfigLink' },
  { value: 'noLink', text: '无链接', hasId: false }
]

export default {
  components: { TinymceEditor },
  props: {
    form: {
      type: Object,
      default() {
        return Object.assign({}, defaultForm)
      }
    }
  },
  data() {
    return {
      ajaxStatus: false,
      uploadVideo: false,
      uploading: false,
      flagIdx: '',
      typeList,
      rules: {
      }
    }
  },
  computed: {
    activeTypeList() {
      return (value) => {
        return typeList.filter(type => type.value === value && type.hasId)
      }
    }
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.query && this.$route.query.id
      this.fetchData(id)
    }
    this.getLinkData()
  },
  methods: {
    getLinkData() {
      getVocationalLink()
        .then(data => {
          this.links.vocationalLink = data.data.content
        })
      getNewsTypeLink()
        .then(data => {
          this.links.newsTypeLink = data.data
        })
      getNewsLink().then(data => {
        this.links.newsLink = data.data.content.map(item => {
          return {
            ...item,
            name: item.title
          }
        })
      })
      getBasicConfigLink().then(res => {
        const { data } = res
        this.links.basicConfigLink = data.map(item => {
          return {
            ...item,
            name: item.classifyName
          }
        })
      })
    },
    // 获取上传图片宽高
    // 获取编辑数据
    fetchData(id) {
      getEditData(id).then(re => {
        const { data } = re
        this.form = Object.assign(this.form, data)
        this.$refs.myEditor.edit(data.value)
      })
    },

    /**
     * 保存、发布接口
     *
     * id：保存为空，编辑传列表id
     */
    submitForm(status) {
      if (this.ajaxStatus) {
        return
      }
      this.ajaxStatus = true

      const errorText = this.validateForm()
      if (errorText) {
        this.ajaxStatus = false
        this.$message.error(errorText)
        return
      }
      this.form.value = this.$refs.myEditor.onEditorChange()
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.status = status
          postData(this.form)
            .then(re => {
              this.ajaxStatus = false
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.reset(re.data)
            })
            .catch(() => {
              this.ajaxStatus = false
            })
        } else {
          this.ajaxStatus = false
          this.$message.error('请正确填写完整信息后再发布')
          return false
        }
      })
    },

    resetActivityType(idx) {
      this.$set(this.basicItems[idx], 'detailLink', '')
      this.$set(this.basicItems[idx], 'buyLink', [{
        name: '',
        buyPlatformColor: '#000',
        link: ''
      }])
    },

    reset(data) {
      // 编辑发布后直接关闭tab跳转至列表页面
      this.form = Object.assign({}, defaultForm)
      this.$refs['form'].resetFields()
      this.$emit('saveContentConfigSuccess', data)
    },

    /**
       * 验证表单项
       * @returns {string} 错误提示
       */
    validateForm() {
      return ''
    }
  }
}
</script>
<style lang="scss">
.href-remark{
  color: #5e6d82;
  .red {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
}
.logo-card{
  margin-bottom: 10px;
}
.video_upload_con{
  height: 100px;
  width: auto;
}
</style>

